<!-- 京东超市精选爆款页面-->
<template>
	<view class="jd-shop">
		<!-- S = 头部 -->
		<page-head :transparent='true'>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
			<slot slot="right">{{''}}</slot>
		</page-head>
		<!-- E = 头部 -->
		
		<!-- S = banner图 -->
		<view class="jd-shop-box">
			<image :src="jdBanner1" mode="widthFix"></image>
			<image :src="jdBanner2" mode="widthFix"></image>
			<image :src="jdnav1" mode="widthFix"></image>
		</view>
		<!-- E = banner图 -->
		
		<!-- S = 尖货秒杀-->
		<view class="seconds-kill">
			<image :src="item.img" mode="widthFix" v-for="(item, i) in ms" :key="i" @click="linkTo(item.url, i)"></image>
		</view>
		<!-- E = 尖货秒杀-->
		
		<!-- S = 爆款直降-->
		<view class="jd-shop-box">
			<image :src="jdnav2" mode="widthFix"></image>
		</view>
		<view class="jd-hotstyle-box">
			<image :src="item.img" mode="widthFix" v-for="(item, index) in hotStyle" :key="index" @click="linkTo(item.url, index)"></image>
		</view>
		<!-- E = 爆款直降-->
		
		<!-- S = 底部-->
		<view class="jd-shop-box">
			<image :src="jdend" mode="widthFix"></image>
		</view>
		<!-- E = 底部-->
	</view>
</template>

<script>
	import jdBanner1 from '../../static/img/jdshop/jdBanner1.png'
	import jdBanner2 from '../../static/img/jdshop/jdBanner2.png'
	import jdnav1 from '../../static/img/jdshop/jdnav1.png'
	import jdnav2 from '../../static/img/jdshop/jdnav2.png'
	import jdend from '../../static/img/jdshop/jdend.png'
	import jhms1 from '../../static/img/jdshop/jhms1.png'
	import jhms2 from '../../static/img/jdshop/jhms2.png'
	import jhms3 from '../../static/img/jdshop/jhms3.png'
	
	import hotstyle1 from '../../static/img/jdshop/hotstyle1.png'
	import hotstyle2 from '../../static/img/jdshop/hotstyle2.png'
	import hotstyle3 from '../../static/img/jdshop/hotstyle3.png'
	import hotstyle4 from '../../static/img/jdshop/hotstyle4.png'
	import hotstyle5 from '../../static/img/jdshop/hotstyle5.png'
	import hotstyle6 from '../../static/img/jdshop/hotstyle6.png'
	import hotstyle7 from '../../static/img/jdshop/hotstyle7.png'
	import hotstyle8 from '../../static/img/jdshop/hotstyle8.png'
	import hotstyle9 from '../../static/img/jdshop/hotstyle9.png'
	import hotstyle10 from '../../static/img/jdshop/hotstyle10.png'
	export default {
		data() {
			return {
				title: '京东超市精选爆款',
				jdBanner1: jdBanner1,
				jdBanner2: jdBanner2,
				jdnav1: jdnav1,
				jdnav2: jdnav2,
				jdend: jdend,
				ms: [
					{
						img: jhms1,
						url: '../selfdetail/selfdetail?skuId=7760&cid=379&title=心相印无芯卷纸 心柔系列 3层140g卷纸*12粒&seller=京东自营'
					},
					{
						img: jhms2,
						url: '../selfdetail/selfdetail?skuId=7484&cid=323&title=立白天然茶籽除螨除菌洗衣液12斤（2kg×2 1kg×2瓶）除菌除螨 温和守护&seller=京东自营'
					},
					{
						img: jhms3,
						url: '../selfdetail/selfdetail?skuId=8011&cid=546&title=小苏先生苏打水饮料360ml*12瓶弱碱性无糖无汽零热量健康饮料&seller=好品购'
					},
				],
				hotStyle: [
					{
						img: hotstyle1,
						url: '../selfdetail/selfdetail?skuId=7330&cid=320&title=清扬(CLEAR)去屑洗发水套装 樱花沁爽型500gx2送樱花沁爽100g(新老包装随机发货)(氨基酸洗发)&seller=京东自营'
					},
					{
						img: hotstyle2,
						url: '../selfdetail/selfdetail?skuId=7384&cid=704&title=福临门 东北大米 金典长粒香大米 中粮出品 10kg&seller=京东自营'
					},
					{
						img: hotstyle3,
						url: '../selfdetail/selfdetail?skuId=3426&cid=297&title=西王 食用油 玉米胚芽油 非转基因物理压榨 3.78L&seller=京东自营'
					},
					{
						img: hotstyle4,
						url: '../selfdetail/selfdetail?skuId=7405&cid=70&title=所望SOMANG牛奶身体乳500ml （补水保湿润体乳液 韩国进口）&seller=京东自营'
					},
					{
						img: hotstyle5,
						url: '../selfdetail/selfdetail?skuId=655&cid=65,125,643&title=三只松鼠 每日坚果坚果礼盒大礼包 &seller=京东自营'
					},
					{
						img: hotstyle6,
						url: '../selfdetail/selfdetail?skuId=2824&cid=126&title=美国进口 绅士牌(Planters)混合坚果·（腰果，巴旦木，碧根果）233g（新老包装随机发货）&seller=好品购'
					},
					{
						img: hotstyle7,
						url: '../selfdetail/selfdetail?skuId=7285&cid=127&title=好想你  新疆阿克苏灰枣 健康情特级（五星）红枣1000g/袋（新老包装随机发放）&seller=好品购'
					},
					{
						img: hotstyle8,
						url: '../selfdetail/selfdetail?skuId=7116&cid=126,1104&title=绝味湖南特产 特色酱板鸭360g 卤味肉干肉脯肉类熟食下饭菜(新老包装交替发货）&seller=好品购'
					},
					{
						img: hotstyle9,
						url: '../selfdetail/selfdetail?skuId=2822&cid=546&title=英国进口 维多麦 Weetabix 水果麦片 欧倍 Alpen 瑞士风味营养即食谷物早餐燕麦片（含干果坚果未加糖）560g&seller=好品购'
					},
					{
						img: hotstyle10,
						url: '../selfdetail/selfdetail?skuId=3299&cid=125,643&title=三只松鼠手剥东北开口松子100g&seller=好品购'
					}
				]
			}
		},
		onShow() {
			window.genCommonData()
		},
		methods: {
			linkTo(url, index) {
				if(url !== '') {
					onEvent('page_home_mid_banner1_goods' + (parseInt(index) + parseInt(1)));
					setTimeout(function() {
						if (url !== '') {
							h5NavigateTo({
								url: decodeURI(url)
							});
						}
					}, 1000);
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.jd-shop{
		width: 100%;
		background: #BB0001;
		
		.jd-shop-box{
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			
			image{
				width: 100%;
				display: block;
			}
		}
		
		.seconds-kill{
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			
			image{
				width: 100%;
				display: block;
			}
		}
		
		.jd-hotstyle-box{
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			display: flex;
			flex-flow: wrap;
			
			image{
				width: 50%;
				display: block;
			}
		}
	}
</style>
